<template>
	<view class="content" :style="{backgroundImage: 'url('+imageURL+')'}">
		<view class="logo-box">
			<image class="logo" src="/static/logo.png"></image>
		</view>
		<view class="text-box">
			<view class="input-user">
				<input class="uni-input" type="text" placeholder="用户名/手机号/邮箱" />
			</view>
			<view class="input-pwd">
				<input class="uni-input" password type="text" placeholder="请输入密码" />
			</view>
		</view>
		<view class="btn-box">
			<button type="primary" @click="login">登录</button>
			<view class="bottom">
				<view class="bottom-text">忘记密码</view>
				<view class="bottom-text">用户注册</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imageURL: '/static/login_bg.png'
			};
		},
		methods:{
			login(){
				uni.reLaunch({
					url:'../index/index'
				})
			}
		}
	}
</script>

<style>
	.content{
		width: 100%;
		height: 100vh;
		background-size: 100% 100%;
	}
	.logo-box{
		padding-top: 150rpx;
		width: 100%;
		text-align: center;
	}
	.logo{
		width: 280rpx;
		height: 280rpx;
		border-radius: 140rpx;
	}
	.text-box{
		margin-top: 50rpx;
	}
	.input-user{
		margin: 0rpx 50rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx 10rpx 0rpx 0rpx;
		border-bottom: #fafafa solid 1px;
		overflow: hidden;
	}
	.input-pwd{
		margin: 0rpx 50rpx;
		background-color: #FFFFFF;
		border-radius: 0rpx 0rpx 10rpx 10rpx; 
		overflow: hidden;
	}
	.uni-input{
		height: 80rpx;
		padding: 0rpx 10rpx;
	}
	.btn-box{
		margin-top: 120rpx;
		padding: 0rpx 50rpx;
	}
	.bottom{
		margin-top: 20rpx;
		width: 100%;
		display: flex;
		justify-content: space-between;
		color: #FFFFFF;
	}
</style>
